<template>
  <div>
    <h2>采购计划</h2>
    <hr>
    <div style="display: flex;margin-left: 850px" >
      <el-button type="primary" @click="UpdateDialogVisible(true)"><i class="el-icon-plus"></i>新增采购计划</el-button>
    </div>
    <hr>
<!--    引入子组件-->
    <el-dialog
        :visible.sync="dialogVisible"
        width="80%"
    >
      <AddBuyPlan @UpdateDialogVisible="UpdateDialogVisible"></AddBuyPlan>
    </el-dialog>

    <el-table
        :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
      <!--1.-->
      <el-table-column
          prop="code"
          label="采购单编号"
      >
      </el-table-column>
      <!--2.-->
      <el-table-column
          prop="goodsName"
          label="商品名字"
      >
      </el-table-column>
      <!--3.-->
      <el-table-column
          prop="auditState"
          label="状态">
      </el-table-column>
      <!--4.-->
      <el-table-column
          prop="reason"
          label="采购原因">
      </el-table-column>
      <!--5.-->
      <el-table-column
          prop="num"
          label="数量">
      </el-table-column>

      <!--6.-->
      <el-table-column
          prop="type"
          label="商品类型">
      </el-table-column>

      <!--7.-->
      <el-table-column
          prop="specs"
          label="规格">
      </el-table-column>


    </el-table>

    <!--页面选择导航--开始-->
    <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>
    </div>
    <!--页面选择导航--结束-->

  </div>
</template>

<script>
import AddBuyPlan from "@/views/AddBuyPlan";
export default {

  //一、名称区
  name: "ShoppingStorage",
  components: {AddBuyPlan},
  //二、数据区
  data(){
    return{
      //1.分页表格数据--开始//
      tableData:[],
      totalCount:null,
      //原型图填充数据
      // tableData:[{
      //   code: 'cg1',
      //   goodsName: '篮球',
      //   auditState: '已申报',
      //   reason: '新品上市',
      //   num: '200',
      //   type: '文具',
      //   specs: 'pc1',
      // },{
      //   code: 'cg2',
      //   goodsName: '篮球',
      //   auditState: '已申报',
      //   reason: '新品上市',
      //   num: '200',
      //   type: '文具',
      //   specs: 'pc1',
      // },{
      //   code: 'cg3',
      //   goodsName: '篮球',
      //   auditState: '已申报',
      //   reason: '新品上市',
      //   num: '200',
      //   type: '文具',
      //   specs: 'pc1',
      // },{
      //   code: 'cg4',
      //   goodsName: '篮球',
      //   auditState: '已申报',
      //   reason: '新品上市',
      //   num: '200',
      //   type: '文具',
      //   specs: 'pc1',
      // },],
      // totalCount:4,


      currentPage:1,
      pageSizes:[1,2,3,4],
      PageSize:3,
      //分页表格数据--结束//
      dialogVisible:false,

    }
  },
  //三、方法区
  methods:{
    init(){

      this.$axios.get("/sscsys/buyplan/findAllPlan").then(
          r=>{

            this.tableData=r.data;
            this.totalCount=r.data.length;

          });
    },
    //1.分页表格换页方法--开始//
    handleSizeChange(val) {
      this.PageSize=val
      this.currentPage=1
    },
    handleCurrentChange(val) {
      this.currentPage=val
    },
//1.分页表格换页方法--结束//
UpdateDialogVisible(state){
      this.dialogVisible=state
      this.init();
}

  },
  //四、初始化区
  mounted() {
    this.init();
  }

}
</script>



<style scoped>

</style>